<template>
	<view
		:class="{ 'uni-collapse-cell--disabled': disabled, 'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen, 'uni-collapse-cell--hide': !isOpen }"
		class="uni-collapse-cell"
	>
		<view class="uni-collapse-cell__title" @click="onClick">
			<!-- <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" /> -->
			<text class="uni-collapse-cell__title-text">{{ title }}</text>
			<!-- #ifdef MP-ALIPAY -->
			<!-- <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__title-arrow">
				<uni-icons color="#bbb" size="20" type="arrowdown" />
			</view> -->
			<!-- #endif -->
			<!-- #ifndef MP-ALIPAY -->
			<uni-icons
				:class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
				class="uni-collapse-cell__title-arrow"
				color="#bbb"
				size="20"
				type="arrowdown"
			/>
			<!-- #endif -->
		</view>
		<view :class="{ 'uni-collapse-cell__content--hide': !isOpen }" class="uni-collapse-cell__content">
			<view
				:class="{ 'uni-collapse-cell--animation': showAnimation === true }"
				class="uni-collapse-cell__wrapper"
				:style="{ transform: isOpen ? 'translateY(0)' : 'translateY(-50%)', '-webkit-transform': isOpen ? 'translateY(0)' : 'translateY(-50%)' }"
			>
				<slot />
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '../uni-icons/uni-icons.vue';
export default {
	name: 'UniCollapseItem',
	components: {
		uniIcons
	},
	props: {
		title: {
			// 列表标题
			type: String,
			default: ''
		},
		name: {
			// 唯一标识符
			type: [Number, String],
			default: 0
		},
		disabled: {
			// 是否禁用
			type: Boolean,
			default: false
		},
		showAnimation: {
			// 是否显示动画
			type: Boolean,
			default: false
		},
		open: {
			// 是否展开
			type: Boolean,
			default: false
		},
		thumb: {
			// 缩略图
			type: String,
			default: ''
		}
	},
	data() {
		return {
			isOpen: false
		};
	},
	watch: {
		open(val) {
			this.isOpen = val;
		}
	},
	inject: ['collapse'],
	created() {
		this.isOpen = this.open;
		this.nameSync = this.name ? this.name : this.collapse.childrens.length;
		this.collapse.childrens.push(this);
		if (String(this.collapse.accordion) === 'true') {
			if (this.isOpen) {
				let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2];
				if (lastEl) {
					this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false;
				}
			}
		}
	},
	methods: {
		onClick() {
			console.log(this.collapse, 'onChange');
			if (this.disabled) {
				return;
			}
			if (String(this.collapse.accordion) === 'true') {
				this.collapse.childrens.forEach(vm => {
					if (vm === this) {
						return;
					}
					vm.isOpen = false;
				});
			}
			this.isOpen = !this.isOpen;
			this.collapse.onChange && this.collapse.onChange();
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.uni-collapse-cell {
	flex-direction: column;
	// border-color: $uni-border-color;
	// border-bottom-width: 1px;
	// border-bottom-style: solid;
}

.uni-collapse-cell--hover {
	// background-color: $uni-bg-color-hover;
}

.uni-collapse-cell--open {
	// background-color: $uni-bg-color-hover;
}

.uni-collapse-cell--disabled {
	// background-color: $uni-bg-color-hover;
	// opacity: 0.3;
}

.uni-collapse-cell--hide {
	height: 48px;
}

.uni-collapse-cell--animation {
	// transition: transform 0.6s ease;
	transition-property: transform;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}

.uni-collapse-cell__title {
	padding: 12px 12px;
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	width: 100%;
	box-sizing: border-box;
	/* #endif */
	height: 48px;
	line-height: 24px;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.uni-collapse-cell__title:active {
	// background-color: $uni-bg-color-hover;
}

.uni-collapse-cell__title-img {
	// height: $uni-img-size-base;
	// width: $uni-img-size-base;
	// margin-right: 10px;
}

.uni-collapse-cell__title-arrow {
	width: 20px;
	height: 20px;
	transform: rotate(0deg);
	transform-origin: center center;
}

.uni-collapse-cell__title-arrow-active {
	transform: rotate(180deg);
}

.uni-collapse-cell__title-text {
	flex: 1;
	font-size: $uni-font-size-base;
	/* #ifndef APP-NVUE */
	white-space: nowrap;
	color: inherit;
	/* #endif */
	/* #ifdef APP-NVUE */
	lines: 1;
	/* #endif */
	overflow: hidden;
	text-overflow: ellipsis;
}

.uni-collapse-cell__content {
	overflow: hidden;
}

.uni-collapse-cell__wrapper {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
}

.uni-collapse-cell__content--hide {
	height: 0px;
	line-height: 0px;
}
</style>
